<template>
  <div class="product">
    <div class="carousel">
    </div>
    <div class="content">
      <h3 class="title">PRODUCT</h3>
      <p class="brif">产品目录</p>
      <div class="productList">
        <div class="productOne clearfix">
          <div class="triangle">
            <p class="num">1</p>
          </div>
            <h2>
              <!-- <router-link :to='{name:"ProductWater"}'>
              生态净水剂系列
              </router-link> -->
              <router-link :to='{name:"ProductDet",params:{item:"productWater"}}'>生态净水剂系列</router-link>
            </h2>

            <div class="left">
              <p>生态净水剂具有高效降解污染源，净化后水质稳定，是独特的生态型污染源控制剂。</p>
              <p>易水生态型绿色环保产品、安全无毒无残留，净化后水体可直接饮用，能够有效去除异味、臭味包括氨、硫化物、有机物，快速并彻底性杀菌、有效持久、稳定性强、无腐化特性。</p>
              <div class="oneList clearfix">
                <img src="./../assets/product/pLifeLeft.png" height="303" width="262" alt="shengtai">
                <img src="./../assets/product/pLifeRight.png" height="303" width="262" alt="shengtai">
              </div>
            </div>
            <div class="right">
              <h4>易水生态净化剂具备以下优势：</h4>
              <ul class="good">
                <li>
                  <h5>处理水量大</h5>
                  <span>适合一次性处理较多的水量，快速溶解于饮用水体；</span>
                </li>
                <li>
                  <h5>外在因素影响小</h5>
                  <span>杀菌能力不受水体PH值及温度影响；</span>
                </li>
                <li>
                  <h5>存放时间长</h5>
                  <span>在阴凉干燥的地方密封，保质期长度7年；</span>
                </li>
                <li>
                  <h5>应用范围广</h5>
                  <span>可用于医疗器械、食品、餐具、饮水机等其他环节与物品的环境消毒；适用于放射性去污擦拭；清理放射性粒子和其他表面污染神包括不锈钢清除放射性同位素，黑色和其他有色金属、塑料、玻璃、橡胶等。</span>
                </li>
              </ul>
            </div>
        </div>
        <div class="productTwo clearfix">
          <div class="triangle">
            <p class="num">2</p>
          </div>
          <h2>
          <router-link :to='{name:"ProductDet",params:{item:"productFilm"}}'>工业膜产品系列</router-link>
          </h2>
          <div class="left">
            <p>膜制品工艺高效合理，具有低压力、耐腐蚀、高强度、不受温度影响的特典，由此构成的污水、中水、海水淡化设备使用寿命长。</p>
            <div class="oneList clearfix">
              <img src="./../assets/product/pFilmLeft.png" height="303" width="262" alt="film">
              <img src="./../assets/product/pFilmRight.png" height="303" width="262" alt="film">
            </div>
            <p>拥有世界一流水处理研发及工程团队，于国内外知名的高校和研究机构合作，目前公司拥有世界上最先进的技术，生态净水剂材料与膜材料、制膜技术、工艺等产品品质已达世界先进水平。</p>
          </div>
          <div class="right">
            <div class="intr clearfix">
              <div class="intrLeft">
                <img src="./../assets/product/pInrto.png" height="145" width="220" alt="intr">
                <span>图片说明</span>
              </div>
              <div class="intrRight">
                 <img src="./../assets/product/pIntroShow.png" height="191" width="118" alt="intr">
              </div>
            </div>
            <p>易水生态不仅拥有自主研发的产品，并提供工程咨询、设计、建设、一体化服务，早水处理与环境污染控制行业内拥有自主研发技术和产品和最新的相关技术具有完成的膜产品与设备制造能力、各种水与环境问题处理方案的设计、施工、安装、运行和管理整体化解决能力、尤其是在海绵城市建设、区域（流域）性环境保护。智慧水服务建设等方面尤为突出。想用户提供与膜应用有关的设计、咨询、运营等一站式服务。</p>
          </div>
        </div>
        <div class="productThree clearfix">
          <div class="triangle">
            <p class="num">3</p>
          </div>
          <h2>
            <router-link :to='{name:"ProductDet",params:{item:"productDete"}}'>实时在线监测产品</router-link>
          </h2>
          <div class="left">
            <p>检测与质量控制中心是独立于各生产部门的产品质量控制与项目监督部门，中心拥有中空纤维膜、反渗透膜、正渗透膜等分离膜产品检测设备，可以测定水通量、截留率、泡点、拉伸强度等性能指标。</p>
            <p>中心同事具备多项水质化验分析设备，中心以科学、公正、准确、高效为核心准则，可以快速完成对PH、DO、SS、MLSS、MLVSS、浊度、COD、BOD5、氨氮、总磷、大肠杆菌与细菌总数等微生物指标以及TDS、电导率、CL-、碱度、硬度等常规水指标的测定。</p>
          </div>
          <div class="right">
            <div class="rest">
              <img src="./../assets/product/pInrto.png" height="145" width="220" alt="intr">
              <span>图片说明</span>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
  export default {

  }
</script>

<style scoped>
.carousel {
  width: 100%;
  height: 11rem;
  background-image: url('./../assets/product/pCarousel.png');
  background-repeat: no-repeat;
  background-size: cover;
}
.product {
  background: url('./../assets/product/bg.png') no-repeat;
  background-attachment: fixed;
  background-size: cover;
}
.productList > div {
  width: 100%;
  background-color: #ffffff;
  padding: 0 4.9rem 3.1rem;
  margin-bottom: 2.4rem;
}
.productList > div:nth-child(3) {
  margin-bottom: 0;
}
.productList > div > h2 {
  font-weight: 800;
  letter-spacing: 3px;
  margin-bottom: 1.2rem;
  margin-top: -1.6rem;
}
.productList > div p {
  font-size: 0.8rem;
  color: #4c4c4c;
  line-height: 1.5rem;
  margin-bottom: .9rem;
}
.left, .right {
  float: left;
}
.left {
  width: 28.6rem;
  padding-right: 1.9rem;
  border-right: 1px solid #cccccc;
}
.right {
  width: 20.1rem;
  padding-left: 2rem;
}
.oneList > img {
  float: left;
  width: 13rem;
}
.oneList > img:nth-child(1) {
  margin-right: 0.6rem;
}
.right h4 {
  font-size: 0.9rem;
  font-weight: 600;
  margin-bottom: 1.8rem;
}
.good li {
  padding-left: 2.2rem;
  background: url('./../assets/product/pCorrect.png') no-repeat left top;
  margin-bottom: 0.7rem;
}
.good li h5 {
  height: 1.3rem;
  line-height: 1.3rem;
  font-size: 0.9rem;
  letter-spacing: 2px;
}
.good li span {
  height: 1.4rem;
  line-height: 1.4rem;
  font-size: 0.8rem;
  color: #4c4c4c;
  letter-spacing: 2px;
}
.productTwo .oneList {
  margin-bottom: 1.3rem;
}
.intrLeft {
  float: left;
  width: 11rem;
  border: 1px solid transparent;
}
.intrRight {
  float: right;
}
.intrLeft img {
  width: 10.95rem;
}
.intrLeft span {
  display: block;
  width: 100%;
  height: 2.3rem;
  padding: 0.6rem 0 0.8rem 0.8rem;
  color: #666666;
  font-size: 0.8rem;
  font-weight: 600;
  letter-spacing: 3px;
  box-shadow: 0 0 3px #666666;
  margin-top: -6px;
}
.right > p {
  margin-top: 1rem;
}
.rest img {
  width: 100%;
}
.rest span {
  display: block;
  width: 100%;
  height: 2.3rem;
  padding: 0.6rem 0 0.8rem 0.8rem;
  color: #666666;
  font-size: 0.8rem;
  font-weight: 600;
  letter-spacing: 3px;
  box-shadow: 0 0 3px #666666;
  margin-top: -6px;
}
.triangle {
  width: 0;
  height: 0;
  border-top: 100px solid #11a2d0;
  border-right: 100px solid transparent;
  position: relative;
  left: -4.9rem;
}
.num {
  position: relative;
  color: #ffffff !important;
  top: -4rem;
  left: 1rem;
  font-size: 4rem !important;
}
</style>
